<template>
	<view class="container">
		<view style="padding-top: 20px;"></view>
		<uni-segmented-control :current="currentIndex" :values="items" style-type="text" active-color="#007aff"
			@clickItem="onClickItem" />

		<view v-if="currentIndex === 0">
			<view style="padding-top: 20px;"></view>
			<!-- <view class="tips">
				<b>假日值班表说明：</b><br>
				此处仅能对系统自动生成的排班进行人员调整！<br>如需修改放假日期，请前往web管理后台【行政-假日排班】内进行修改
				
			</view> -->
			<view>
				<uni-calendar class="uni-calendar--hook" :insert="true"  :start-date="startTime"
					:end-date="endTime" :selected="selected"  />
			</view>
			<!-- <view style="padding-top: 20px;"></view>
			<view>
				<uni-section :title="item.year + '年' + item.month + '月排班'" type="circle" v-for="item in xiuxiDayList">
					<uni-list>
						<view v-for="item1 in item.days" @click="zhibanren(item1)">
							<uni-list-item :title="item1.monthDay" :rightText="zhibanName(item1.zhiban)" showArrow>
								{{item1.zhiban.length}}
							</uni-list-item>
						</view>
					</uni-list>
				</uni-section>
			</view> -->

		</view>
		<view v-if="currentIndex === 1">
			<view style="padding-top: 20px;"></view>
			<view v-for="item in paibanStatis">
				<uni-section :title="item.year + '年' + item.month + '月值班时长'" type="circle">
					<uni-list v-for="item1 in item.userList">
						<uni-list-item :title="item1.name" :rightText="item1.cnt + '日'" showArrow />
					</uni-list>
				</uni-section>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		websock
	} from '../../net/websock'
	import moment from 'moment'

	export default {
		data() {
			return {
				currentIndex: 0,
				items: ['排班记录', '值班时长统计'],
				xiuxiDayList: [],
				paibanStatis: [],
				selected: [],
				curYear: 0,
				curMonth: 0,
				
				startTime:'',
				endTime:'',
			}
		},
		onLoad() {
			uni.$on('paiban_change', this.paibanChange)
			this.startTime =moment().format("YYYY-MM-DD")
			
			this.endTime = "2050-12-31"
			
		},
		onUnload() {
			uni.$off('paiban_change', this.paibanChange)
		},
		onShow() {
			console.log('on show')
			if (!this.curYear) {
				this.curYear = moment().year()
			}
			if (!this.curMonth) {
				this.curMonth = moment().month() + 1
			}

			this.getselected(this.curYear, this.curMonth)
		},
		async onReady() {
			console.log('on ready')
			this.getList()
			this.getStatis()
		},
		methods: {
			getList() {
				let xiuxiDayObj = {}
				this.xiuxiDayList = []
				websock.getXiuxiDayListApp().then(data => {
					for (let i = 0; i != data.length; i++) {
						let riqi = moment(data[i].riqi)
						let year = riqi.get('year')
						let month = riqi.get('month') + 1
						let yearMonth = riqi.format('YYYY-MM')
						let monthDay = moment(riqi).format('MM-DD 周') + ['日', '一', '二', '三', '四', '五', '六'][moment(
							riqi).day()]
						xiuxiDayObj[yearMonth] = xiuxiDayObj[yearMonth] || {
							days: []
						}
						xiuxiDayObj[yearMonth].year = year
						xiuxiDayObj[yearMonth].month = month
						xiuxiDayObj[yearMonth].days.push({
							id: data[i].id,
							riqi: riqi.format('YYYY-MM-DD'),
							monthDay,
							zhiban: data[i].zhiban || [],
						})
					}

					for (let key in xiuxiDayObj) {
						this.xiuxiDayList.push(xiuxiDayObj[key])
					}
				})
			},
			onClickItem(e) {
				if (this.currentIndex !== e.currentIndex) {
					this.currentIndex = e.currentIndex
					this.getselected(moment().year(), moment().month() + 1)
				}
			},
			zhibanName(info) {
				let nameStr = ''

				for (let u = 0; u < info.length; u++) {
					if (u == 0) {
						nameStr = info[u].name
					} else {
						nameStr = nameStr + '、' + info[u].name
					}

				}
				return nameStr

			},
			zhibanren(info) {
				console.log("ok", info)
				uni.navigateTo({
					url: "/pages/xingzheng/paibanDetail?info=" + JSON.stringify(info)
				})
			},
			paibanChange() {
				this.getList()
			},

			getStatis() {
				websock.paibanStatis().then(data => {
					console.log('paban statis', data)
					this.paibanStatis = data
				})
			},
			change(e) {
				let info=''
				for(let i=0 ; i < this.xiuxiDayList.length;i++){
					// console.log('item'+i,this.xiuxiDayList[i].days)
					for(let j=0 ;j< this.xiuxiDayList[i].days.length;j++){
						// console.log('days:',this.xiuxiDayList[i].days[j])
						for(let item in this.xiuxiDayList[i].days[j]){
							// console.log('item:',item,this.xiuxiDayList[i].days[j][item])
							if(item=='riqi'&&this.xiuxiDayList[i].days[j][item]==e.fulldate){
								info = this.xiuxiDayList[i].days[j]
							}
							
						}
						
					}
				}
				if(info!=''){
					this.zhibanren(info)
				}
				
				
			},
			getselected(year, month){
				console.log(year,month)
				this.curYear = year
				this.curMonth = month

				websock.paibanMonthDetail({year, month}).then(res => {
					this.selected = res
				})
				
			},
			monthSwitch(e) {
				this.getselected(e.year,e.month)
				
				
			}
		}
	}
</script>

<style>
	.container {
		line-height: 24px;
		background: linear-gradient(to bottom, #E8F5FD 50%, #F5F5F5 100%);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.tips {
		background-color: #EDEEF0;
		padding: 5px;
		color: #0E1634;
		font-size: 11px;
		/* border: 1px solid #e6e6e6;
		border-radius: 5px; */
	}
	
	
</style>
